﻿@model OrderControllerModel.Consign
<div class="my-main">
    @using (Html.BeginForm())
    {
        <div class="ui-box  ui-box-alpha">
            <div class="ui-box-head">
                <div class="ui-box-head-border">
                    <div class="ui-box-head-title">
                        物流中心</div>
                    <span class="ui-box-head-text">发货</span> <a href="#" class="ui-box-head-more"></a>
                </div>
            </div>
            <div class="ui-box-container">
                <div class="ui-box-content">
                    dd</div>
            </div>
            <div class="ui-box-container-noborder">
                <div class="ui-box-content">
                </div>
            </div>
            <div class="ui-box-container-noborder">
                <div class="ui-box-container-head">
                    确认收货信息及交易详情</div>
                <div class="ui-box-content">
                    <table class="ui-table ui-table-alpha">
                        <thead>
                            <tr>
                                <th colspan="2" class="text-align-left">
                                    <label class="checkbox-inline">
                                        <input type="checkbox" onclick='if(this.checked==true){$("input[name=subId]").check();}else{$("input[name=subId]").uncheck();}' />
                                        全选 <span>订单编号：@(Model.Order.Id)</span>
                                    </label>
                                    <span class="pull-right">创建时间：@Model.Order.CreatedOn.ToString("yyyy-MM-dd HH:mm")</span>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td style="border-right: 1px solid #CCCCCC;">
                                    @foreach (var item in Model.Order.OrderItems.Where(o => !Model.Shippings.Contains(o.Id)))
                                    {
                                        <div class="row">
                                            <div class="col-md-1">
                                                <input type="checkbox" name="subId" value="@(item.Id.TrimEnd())" /></div>
                                            <div class="col-md-11">
                                                <div>
                                                    <div class="media">
                                                        <a target="_blank" href="" class="pull-left">
                                                            <img src=""
                                                                style="width: 64px; height: 64px;" alt="64x64" class="media-object" data-src="holder.js/64x64">
                                                        </a>
                                                        <div class="media-body">
                                                            <h5 class="media-heading">
                                                                @item.Name
                                                            </h5>
                                                            <ul class="list-unstyled">
                                                                @foreach (var p in item.PropTexts.OrderBy(o => o.Length))
                                                                {
                                                                    <li>@p </li>
                                                                }
                                                                <li class="text-align-right">@(item.Price.ToString("N"))
                                                                    × @(item.Quantity)</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    }
                                </td>
                                <td class="text-align-left" style="vertical-align: top;">
                                    <div>
                                        <p>
                                            我的备忘：</p>
                                        <p>
                                            <textarea name="extra" class="form-control" cols="50" rows="3"></textarea></p>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" class="text-align-left" style="padding: 0">
                                    <div class="address-list-item">
                                        <div class="row">
                                            <div class="col-md-8">
                                                <div class="address-list-item-content">
                                                    <p>
                                                        <strong>@(Model.Order.Receiver)</strong> <span>@(Model.Order.Phone)
                                                            @(Model.Order.Mobile)</span>
                                                    </p>
                                                    <p>
                                                        @(Model.Order.Province)
                                                        @(Model.Order.City)
                                                        @(Model.Order.District)
                                                        @(Model.Order.Address)
                                                        (@(Model.Order.PostalCode))
                                                    </p>
                                                </div>
                                            </div>
                                            <div class="col-md-2 address-list-item-actions">
                                                <span>收货地址</span>
                                            </div>
                                            <div class="col-md-2 address-list-item-actions">
                                                <div class="dropdown">
                                                    <a title="修改收货信息" href="javascript:void(0);" data-toggle="dropdown"><i class="fa fa-pencil">
                                                    </i>&nbsp; 修改收货信息</a>
                                                    <ul class="dropdown-menu text-align-left pull-right" style="width: 600px;" onclick="event.preventDefault();event.stopPropagation();">
                                                        <li class="dropdown-header">收货信息 </li>
                                                        <li class="divider"></li>
                                                        <li>
                                                            <div style="margin: 0 20px 10px;">
                                                                <div class="row">
                                                                    <div class="col-md-2">
                                                                        收货人
                                                                    </div>
                                                                    <div class="col-md-10">
                                                                        <input name="receiver.Name" type="text" class="form-control  input-medium" value="@(Model.Order.Receiver)" />
                                                                        <p class="help-block">
                                                                            收货人的真实姓名</p>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-md-2">
                                                                        收货地址
                                                                    </div>
                                                                    <div class="col-md-10">
                                                                        <span>
                                                                            @Html.DropDownList("receiver.province", Model.Province, new { id = "receiver-province", @class = "form-control input-medium", style = "margin-right:5px; display:inline;", onchange = "areaChange(this)" })
                                                                            @Html.DropDownList("receiver.city", Model.City, new { id = "receiver-city", @class = "form-control input-medium", style = "margin-right:5px; display:inline;", onchange = "areaChange(this)" })
                                                                            @Html.DropDownList("receiver.district", Model.District, new { id = "receiver-district", @class = "form-control input-medium", style = "display:inline;", onchange = "areaChange(this)" })
                                                                        </span>
                                                                        <input name="receiver.Address" type="text" class="form-control" value="@(Model.Order.Address)" />
                                                                        <p class="help-block">
                                                                            街道地址（不需要填写省市区）</p>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-md-2">
                                                                        电话号码：
                                                                    </div>
                                                                    <div class="col-md-10">
                                                                        <input name="receiver.Phone" type="text" class="form-control" value="@(Model.Order.Phone)" />
                                                                        <p class="help-block">
                                                                            格式：区号 - 电话号码 - 分机号</p>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-md-2">
                                                                        手机号码：
                                                                    </div>
                                                                    <div class="col-md-10">
                                                                        <input name="receiver.Mobile" type="text" class="form-control" value="@(Model.Order.Mobile)" />
                                                                        <p class="help-block">
                                                                            电话和手机请至少填写一个
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-md-2">
                                                                        邮政编码：
                                                                    </div>
                                                                    <div class="col-md-10">
                                                                        <input id="receiver-postalcode" name="receiver.PostalCode" class="form-control"  type="text" value="@(Model.Order.PostalCode)" />
                                                                    </div>
                                                                </div>
                                                                <div class="row">
                                                                    <div class="col-md-6">
                                                                        <input type="hidden" id="receiver-areaid" name="receiver.AreaId" value="@(Model.Order.AreaId)"  />
                                                                        <button type="button" class="btn btn-primary">
                                                                            确 认</button>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="ui-box-container-noborder">
                <div class="ui-box-container-head">
                    确认发货/退货信息</div>
                <div class="ui-box-content">
                    @if (Model.DefaultSendAddress == null || Model.DefaultRefundAddress == null)
                    {
                        <div class="alert alert-warning">
                            <strong>!</strong> 请先设置发货/退货地址信息
                        </div>
                    }
                    else
                    {
                        <div style="border: 1px solid #DCDFE5;">
                            <div class="address-list">
                                <div class="address-list-item  address-list-item-default" id="address-1">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <div id="sendAddress" class="address-list-item-content">
                                                <p>
                                                    <strong>@(Model.DefaultSendAddress.Name)</strong> <span>@(Model.DefaultSendAddress.Mobile)
                                                        @(Model.DefaultSendAddress.Phone)</span>
                                                </p>
                                                <p>
                                                    @(UserAddress.GetAreaName(Model.DefaultSendAddress.AreaId, Model.Areas))
                                                    @(Model.DefaultSendAddress.Address)
                                                    (@(Model.DefaultSendAddress.PostalCode))
                                                </p>
                                            </div>
                                        </div>
                                        <div class="col-md-2 address-list-item-actions">
                                            <span>发货地址</span>
                                        </div>
                                        <div class="col-md-2 address-list-item-actions">
                                            <div id="dropdown-sendaddress" class="dropdown">
                                                <a title="修改发货信息" href="javascript:void(0);" data-toggle="dropdown"><i class="fa fa-pencil">
                                                </i>&nbsp; 修改发货信息</a>
                                                <ul class="dropdown-menu text-align-left pull-right" style="width: 700px;" onclick="event.preventDefault();event.stopPropagation();">
                                                    <li class="dropdown-header">请选择合适的发货地址 </li>
                                                    <li class="divider">
                                                        <input type="hidden" id="sendAddressId" name="sendAddressId" value="@(Model.DefaultSendAddress.Id)" /></li>
                                                    @foreach (var o in Model.Addresses.Where(o => o.Category == AddressCategory.Send))
                                                    {
                                                        <li>
                                                            <div style="padding: 5px 10px; line-height: 25px;">
                                                                <div class="row">
                                                                    <div class="col-md-2">@o.Name
                                                                    </div>
                                                                    <div class="col-md-6">@(UserAddress.GetAreaName(o.AreaId, Model.Areas))
                                                                        @o.Address (@o.PostalCode)
                                                                    </div>
                                                                    <div class="col-md-3">@o.Mobile @o.Phone
                                                                    </div>
                                                                    <div class="col-md-1">
                                                                        <a href="javascript:void(0);" onclick="selectAddress(@(o.Id),@((byte)o.Category),'@(o.Name)','@o.Mobile','@o.Phone','@(UserAddress.GetAreaName(o.AreaId, Model.Areas))','@o.Address',' (@o.PostalCode)');">
                                                                            选择</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    }
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="address-list-item address-list-item-last" id="address-2">
                                    <div class="row">
                                        <div class="col-md-8">
                                            <div id="refundAddress" class="address-list-item-content">
                                                <p>
                                                    <strong>@(Model.DefaultRefundAddress.Name)</strong> <span>@(Model.DefaultRefundAddress.Mobile)
                                                        @(Model.DefaultRefundAddress.Phone)</span>
                                                </p>
                                                <p>
                                                    @(UserAddress.GetAreaName(Model.DefaultRefundAddress.AreaId, Model.Areas))
                                                    @(Model.DefaultRefundAddress.Address)
                                                    (@(Model.DefaultRefundAddress.PostalCode))
                                                </p>
                                            </div>
                                        </div>
                                        <div class="col-md-2 address-list-item-actions">
                                            <span>退货地址</span>
                                        </div>
                                        <div class="col-md-2 address-list-item-actions">
                                            <div id="dropdown-refundaddress" class="dropdown">
                                                <a title="修改退货信息" href="javascript:void(0);" data-toggle="dropdown"><i class="fa fa-pencil">
                                                </i>&nbsp; 修改退货信息</a>
                                                <ul class="dropdown-menu text-align-left pull-right" style="width: 700px;" onclick="event.preventDefault();event.stopPropagation();">
                                                    <li class="dropdown-header">请选择合适的退货地址 </li>
                                                    <li class="divider">
                                                        <input type="hidden" id="refundAddressId" name="refundAddressId" value="@(Model.DefaultRefundAddress.Id)" /></li>
                                                    @foreach (var o in Model.Addresses.Where(o => o.Category == AddressCategory.Refund))
                                                    {
                                                        <li>
                                                            <div style="padding: 5px 10px; line-height: 25px;">
                                                                <div class="row">
                                                                    <div class="col-md-2">@o.Name
                                                                    </div>
                                                                    <div class="col-md-6">@(UserAddress.GetAreaName(o.AreaId, Model.Areas))
                                                                        @o.Address (@o.PostalCode)
                                                                    </div>
                                                                    <div class="col-md-3">@o.Mobile @o.Phone
                                                                    </div>
                                                                    <div class="col-md-1">
                                                                        <a href="javascript:void(0);" onclick="selectAddress(@(o.Id),@((byte)o.Category),'@(o.Name)','@o.Mobile','@o.Phone','@(UserAddress.GetAreaName(o.AreaId, Model.Areas))','@o.Address',' (@o.PostalCode)');">
                                                                            选择</a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </li>
                                                    }
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    }
                </div>
            </div>
            @if (Model.DefaultSendAddress != null && Model.DefaultRefundAddress != null)
            {
                <div class="ui-box-container-noborder">
                    <div class="ui-box-container-head">
                        选择物流服务</div>
                    <p>
                    </p>
                    <div class="tabbable">
                        <ul class="nav nav-tabs" style="padding-left: 40px;">
                            <li class="active"><a href="#1">在线下单</a></li>
                            <li><a href="#2">自己联系物流</a></li>
                            <li><a href="#3">无需物流</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active">
                                <div class="ui-box-content">
                                    <table class="ui-table ui-table-alpha">
                                        <thead>
                                            <tr>
                                                <th class="span4 text-align-left">
                                                    公司名称
                                                </th>
                                                <th class="span4 text-align-left">
                                                    运单号码
                                                </th>
                                                <th class="span2 text-align-left">
                                                    备 注
                                                </th>
                                                <th class="span2">
                                                    操 作
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach (var o in Model.LogisticsCompanies.Take(5))
                                            {
                                                <tr>
                                                    <td class="text-align-left">
                                                        @o.Name
                                                    </td>
                                                    <td class="span4 text-align-left">
                                                        <input type="text" id="express-1-@(o.Id)" class="form-control input-medium" style="margin-bottom: 0;" />
                                                    </td>
                                                    <td class="text-align-left">
                                                        asdf
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-default btn-sm" onclick="submitExpress(1, @(o.Id),this.form);">
                                                            确 认</button>
                                                    </td>
                                                </tr>
                                            }
                                        </tbody>
                                        <tbody id="more-companies" style="display: none;">
                                            @foreach (var o in Model.LogisticsCompanies.Skip(5))
                                            {
                                                <tr>
                                                    <td class="text-align-left">
                                                        @o.Name
                                                    </td>
                                                    <td class="text-align-left">
                                                        <input type="text" id="express-1-@(o.Id)" class="form-control input-medium" style="margin-bottom: 0;" />
                                                    </td>
                                                    <td class="text-align-left">
                                                        asdf
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-default btn-sm" onclick=" submitExpress(1, @(o.Id),this.form);">
                                                            确 认</button>
                                                    </td>
                                                </tr>
                                            }
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <td colspan="4">
                                                    <a href="javascript:void(0)" onclick="$('#more-companies').toggle();$(this).children().toggleClass('icon-chevron-down icon-chevron-up');">
                                                        <i class="icon-chevron-down"></i>其它物流公司</a>
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    }
</div>
@section css{
    <style type="text/css">
        .dropdown-menu:after { border-bottom: 6px solid #FFFFFF; border-left: 6px solid transparent; border-right: 6px solid transparent; content: ""; display: inline-block; right: 10px; position: absolute; top: -6px; }
        .dropdown-menu:before { border-bottom: 7px solid rgba(0, 0, 0, 0.2); border-left: 7px solid transparent; border-right: 7px solid transparent; content: ""; display: inline-block; right: 9px; position: absolute; top: -7px; }
    </style>
}
@section js{
    @Url.Ayatta().StaticJs("china.area")
    <script type="text/javascript">
        function areaChange(obj) {
            var val = $(obj).val();
            if (val.length == 6) {
                var area = _.findWhere(ChinaAreas, { Id: val });
                $("#receiver-postalcode").val(area.Zip);
                $('#receiver-areaid').val(area.Id);
                return;
            }
            $("#receiver-postalcode").val('');
            var html = [];
            var areas = _.where(ChinaAreas, { ParentId: val });
            html.push("<option value=''>请选择</option>");
            _.each(areas, function (o) {
                html.push("<option value=" + o.Id + ">" + o.Name + "</option>");
            });

            if (val.length == 4) {
                $("#receiver-district").html(html.join(""));
            }
            if (val.length == 2) {
                $("#receiver-district").html("<option value=''>请选择</option>");
                $("#receiver-city").html(html.join(""));
            }
            $('select').select2();
        }
        function selectAddress(id, category, name, mobile, phone, area, address, postalcode) {
            var tpl = "<p><strong>{0}</strong><span> {1} {2}</span></p><p>{3} {4} {5}</p>";
            var html = $.format(tpl, name, mobile, phone, area, address, postalcode);
            if (category == 1) {
                $('#sendAddressId').val(id);
                $('#sendAddress').html(html);
                $('#dropdown-sendaddress').removeClass('open');
            }
            if (category == 2) {
                $('#refundAddressId').val(id);
                $('#refundAddress').html(html);
                $('#dropdown-refundaddress').removeClass('open');
            }
        }
        function submitExpress(categoryId, companyId, form) {
            $("input[name='expressno']").removeAttr("name");
            var id = $.format("express-{0}-{1}", categoryId, companyId);
            var element = document.getElementById(id);
            element.setAttribute("name", "expressno");
            var param = $(form).serialize();
            $.postJSON(form.action, param, function (result) {
                if (result.Status == true) {
                    window.location.reload();
                }
                else {
                    alert(result.Message);
                }
            });
        }
        $(function () {
            $('select').select2();
            $('[data-rel="popover"]').popover();
            $('#modal').on('hidden.bs.modal', function () {
                $(this).empty().removeData('bs.modal');
            });
        });
    </script>
}
